<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="6" />
    </div>

    <div class="container__content justify-between">
      <div class="container__content__left">
        <!-- 左侧搜索条件 -->
        <SearchUser @search="onSearch" :zone-list="zoneList" :user-type-list="userTypeList"></SearchUser>
      </div>
      <div class="container__content__right">
<!--        <div class="justify-start search-box">-->
<!--          <el-select v-model="value" placeholder="全部检索结果" style="background-color: transparent">-->
<!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->

        <el-scrollbar style="height: calc(100% - 56px)">
          <div class="search-photo justify-start" v-if="userArr.length > 0">
            <div v-for="(item, index) in userArr" :key="index" class="image" @click="getLocus(item)" >
              <el-image style="
                width: 188px;
                height: 188px;

              " :src="item.path" fit="fit"
                :lazy="true"
                @dragstart="dragStart($event, item.userId)"
                @dragover.prevent @drop="drop($event, item.userId)"
              ></el-image>
                <div class="biaozhu-bac">
                  <div class="biaozhu" @click.stop="getMarking(item)"></div>
                </div>
              <div class="time">抓拍时间：{{ getDate(item.createTime) }}</div>
            </div>
          </div>

          <div class="container__content__right__pagination justify-end" v-if="userArr.length > 0">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageNo" :page-sizes="pageSizeArr" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
          </div>
          <div v-else style="color: #efefef">暂无数据</div>
        </el-scrollbar>
      </div>
    </div>
    <el-dialog title="人员信息" :visible.sync="show" width="680px" :append-to-body="true">
      <div slot="footer" class="dialog-footer">
        <el-image style="width: 295px; height: 295px;margin-left: 48px" :src="imgPath" fit="fit">
        </el-image>
        <div class="dialog-substance">
          <div class="substance">
            <span class="substance-title">用户姓名</span>
            <el-autocomplete class="inline-input" :fetch-suggestions="querySearchAsync" :popper-append-to-body="false"
              v-model="form.name" placeholder="请输入" @select="handleSelect">
            </el-autocomplete>
          </div>
          <div class="substance substance2">
            <span class="substance-title">用户性别</span>
            <el-select v-model="form.gender" placeholder="请选择">
              <el-option label="男" value= 2 ></el-option>
              <el-option label="女" value= 1 ></el-option>
              <el-option label="未知" value= 3 ></el-option>
            </el-select>
          </div>
          <div class="substance">
            <span class="substance-title">用户年龄</span>
            <el-input v-model="form.age" placeholder="请输入"></el-input>
          </div>
          <div class="substance substance2">
            <span class="substance-title">人员库</span>
            <el-select v-model="form.ku" placeholder="请选择">
              <el-option v-for="item in personnelPoolInfo" :key="item.id" :label="item.typeName"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="but">
          <div class="cancel">
            <el-button @click="cancel">取消</el-button>
          </div>
          <div class="confirm">
            <el-button @click="confirm">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
      <div class="detail" v-if="detail.length > 0">
            <div v-for="(item, index) in detail" :key="index" class="image">
              <el-image style="
                width: 188px;
                height: 188px;

              " :preview-src-list="detail.map(_item => _item.path)" :src="item.path" fit="fit"
                :lazy="true"></el-image>
              <div class="time">抓拍时间：{{ getDate(item.createTime) }}</div>
            </div>
          </div>
     </el-dialog>

    <el-dialog title="合并图片" :visible.sync="showDiaglog" width="680px" :append-to-body="true">
      <div class="dialog-footer">
        <div class="dialog-info">
            <span>合并这两张图片：序号分别为 {{ id1 }}  和  {{ id2 }}</span>
        </div>
        <div class="but">
          <div class="cancel">
            <el-button @click="cancelCombine">取消</el-button>
          </div>
          <div class="confirm">
            <el-button @click="confirmCombine">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import SearchUser from "@/components/SearchUser.vue";

import {
  getServiceList,
  getUserList,
  searchUser,
  getPersonnelInformation,
  getStorehouse,
  listOfPeopleIsAdded,
  getPersonnelInformation2,
  personIdentificationDetails
} from "@/api/home";
import {getUserTypeList, personnelCombineImage} from "@/api/user";
import { getDate } from "@/utils/getTime";

export default {
  name: "personalIdentific",
  components: {
    Header,
    SearchUser,
  },

  data() {
    return {
      currentId: 1,
      startTime: null,
      endTime: 0,
      zoneList: [],
      userTypeList: [],
      value: "",
      options: [],

      userArr: [],
      pageNo: 1,
      pageSize: 20,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      totalCount: 0,
      dialogTitle: "详情",
      path: null,
      imageUrl: null,
      show: false,
      form: {
        name: '',
        gender: '',
        age: '',
        ku: '',
        userId: '',
        listId: '',
      },
      restaurants: [],
      timeout: null,
      personnelPoolInfo: [],
      imgPath: '',
      dialogVisible: false,
      detail:[],
      clickCount: 0,
      clickTimer: null,
      id1: '',
      id2: '',
      showDiaglog: false,
    };
  },

  mounted() {
    //this.getUserLists();
    this.form = {
      name: '',
      gender: '',
      age: '',
      ku: '',
      userId: '',
      listId: '',
    }
    this.getStorehouse();
    this.getServiceList();
    this.getUserTypeList();
  },

  methods: {
    getDate,
    async getServiceList() {
      let res = await getServiceList();
      if (res.code === 200) {
        this.zoneList = res.data;
      }
    },
    async getUserTypeList() {
      let res = await getUserTypeList();
      if (res.code === 200) {
        this.userTypeList = res.data;
      }
    },

    dragStart(event, value) {
      event.dataTransfer.setData('text/plain', value);
    },
    drop(event,value) {
      event.preventDefault();
      var data = event.dataTransfer.getData('text/plain');
      // 合并图片后删除第二张图片信息 向后端提交请求更新数据
      this.updateUserTypeList(data,value);
    },

    /**
     * @author 李昌雨
     * @param data 保留图片id
     * @param value 删除图片id
     */
    updateUserTypeList(data,value) {
      this.id1 = data;
      this.id2 = value;
      this.showDiaglog = true;
    },
    async confirmCombine() {
      let res = await personnelCombineImage({userId: this.id1, delUserId: this.id2});
      if (res.code === 200) {
        //合并成功 更新数据
        this.$router.go(0)
        this.showDiaglog = false;
      } else {
        this.$message.error(res.message);
      }
    },
    async cancelCombine() {
      this.showDiaglog = false;
      this.id1 = '';
      this.id2 = '';
    },

//时间筛选
    onSearch(e) {
      console.log(e);
      this.startTime = e.startTime;
      this.endTime = e.endTime;
      this.imageUrl = e.imageUrl;
      this.path = e.path;
      this.zoneId = e.zoneId;
      this.userTypeId = e.userTypeId;
      this.pageNo = 1;
      this.userArr = [];
      this.searchUsers();
    },
    //筛选人员
    async searchUsers() {
      let res = await searchUser({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime && new Date(this.startTime).getTime() / 1000,
        endTime: this.endTime && new Date(this.endTime).getTime() / 1000,
        // isDraw: 1, //是否画像
        path: this.path, //图片地址
        imageData: this.imageUrl,
        zoneId: this.zoneId,
        userTypeId: this.userTypeId
      });

      if (res.code == 200) {
        this.userArr = res.data.lists;
        this.totalCount = res.data.count;
      } else {
        this.userArr = [];
        this.totalCount = 0;
      }
    },
    //人员初始化列表
    async getUserLists() {
      let nowDate = parseInt(new Date().getTime() / 1000);

      let res = await getUserList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime
          ? new Date(this.startTime).getTime() / 1000
          : nowDate,
        endTime: this.endTime
          ? new Date(this.endTime).getTime() / 1000
          : nowDate,
        zoneId: this.zoneId, //区域id
        userTypeId: this.userTypeId
      });
      if (res.code === 200) {
        // this.userArr = Array.from(
        //   new Set([...this.userArr, ...res.data.lists])
        // );
        this.userArr = res.data.lists;
        this.totalCount = res.data.count;
      }
    },



    handleCurrentChange(e) {
      this.pageNo = e;
      this.userArr = [];
      this.searchUsers();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.userArr = [];
      this.searchUsers();
    },

    //开始检索
    searchUser() {
      // if (
      //   new Date(this.endTime).getTime() <= new Date(this.startTime).getTime()
      // ) {
      //   return this.$message({
      //     message: "结束时间需大于开始时间",
      //     type: "error",
      //   });
      // }
      this.userArr = [];
      this.pageNo = 1;
      this.getUserLists();
    },

    resetSearch() {
      this.startTime = null;
      this.endTime = null;
    },
    getMarking(item) {
      this.imgPath = item.path
      this.form.userId = item.userId;
      this.getPersonnelInformation2()
      this.show = true;
    },
    handleSelect(item) {
      this.form.listId = item.id;
      this.form.name = item.userName;
      this.form.age = item.age;
      this.form.gender = item.gender.toString();
    },
    async querySearchAsync(queryString, cb) {
      let res = await getPersonnelInformation()
      if (res.code === 200) {
        this.restaurants = res.data;
      }
      let restaurants = this.restaurants.map((terminal) => {
        return {
          value: `${terminal.userName}   ${terminal.gender === 1 ? '男' : '女'}   ${terminal.age}岁`,
          ...terminal
        };
      });
      let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.userName.toLowerCase().match(queryString.toLowerCase());
      };
    },
    //人员库
    async getStorehouse() {
      let res = await getStorehouse();
      if (res.code == 200) {
        this.personnelPoolInfo = res.data;
      }
    },


    cancel() {
      this.form = {
        name: '',
        gender: '',
        age: '',
        ku: '',
        userId: '',
        listId: '',
      }
      this.show = false;
    },
    async confirm() {
      let res = await listOfPeopleIsAdded({
        userId: this.form.userId,
        userName: this.form.name,
        age: this.form.age,
        gender: this.form.gender,
        userTypeId: this.form.ku,
        listId: this.form.listId,
      });
      if (res.code === 200) {
        this.getUserLists()
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.form = {
          name: '',
          gender: '',
          age: '',
          ku: '',
          userId: '',
          listId: '',
        }
        this.show = false;
      }
    },
    async getPersonnelInformation2() {
      let res = await getPersonnelInformation2({
        userId: this.form.userId,
      });
      if (res.code === 200) {
        this.form.age = res.data.age;
        this.form.gender = res.data.gender === 0 ? '' : res.data.gender.toString();
        this.form.name = res.data.userName.length > 18 ? '' : res.data.userName;
        this.form.ku = res.data.typeUserId
          ;
      }
    },
    async getLocus(item){
      let nowDate = parseInt(new Date().getTime() / 1000);
      let res = await personIdentificationDetails({
        userId: item.userId,
        startTime: this.startTime
          ? new Date(this.startTime).getTime() / 1000
          : nowDate,
        endTime: this.endTime
          ? new Date(this.endTime).getTime() / 1000
          : nowDate,
      });
      if (res.code === 200) {
        this.detail = res.data;
      }
      this.dialogVisible = true;
    }
  }
};


</script>

<style lang="scss" scoped>
.container {
  &__content {
    margin-top: 16px;
    width: calc(100% - 20px);
    height: auto;
    margin-left: 20px;

    &__left {
      width: 364px;
      height: 982px;
      background-color: #303136;
      border-radius: 8px;
      padding: 24px;
      box-sizing: border-box;
    }

    &__right {
      width: 1488px;
      height: 982px;
      background-color: #303136;
      border-radius: 8px;
      padding: 24px 0;
      box-sizing: border-box;
      margin-right: 20px;

      &__pagination {
        width: 100%;
        margin-top: 24px;
        padding: 0 24px;
        box-sizing: border-box;
      }

      .search-box {
        width: 226px;
        height: 36px;
        padding-left: 36px;

        .el-select {
          width: 100%;
        }
      }

      .search-photo {
        margin-top: 30px;
        flex-wrap: wrap;

        .image {
          margin-bottom: 24px;
          margin-left: 24px;
          position: relative;

          .biaozhu-bac{
            height: 28px;
            background-color: rgba(23, 24, 26, 0.7);
            width: 100%;
            position: absolute;
            bottom: 20px;
            cursor: pointer;
           display: flex;
           justify-content: center;
          }
          .biaozhu {
            background-image: url("@/assets/biaozhu.png");
            background-size: 100% 100%;
            width: 81px;
            height: 28px;
          }
        }

        .time {
          color: #FFFFFF;
          font-size: 12px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  align-items: center;

  .dialog-substance {
    margin-left: 40px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    gap: 20px;
    width: 115px;

    .substance {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .substance-title {
        width: 70px;
        color: #949BA4;
        text-align: start;
      }

      .substance-value {
        color: #fff;
      }


   ::v-deep .el-input__suffix {
      right: -65px;
  }
    }
  }
}

::v-deep .el-dialog {
  width: 680px;
  height: 539px;
  border-radius: 16px;

  .el-dialog__title {
    font-size: 24px;
    margin-left: 20px;
  }

  .el-icon-close:before {
    font-size: 34px;
  }

  .el-input__inner {
    width: 184px;
  }

}

::v-deep .el-autocomplete-suggestion__wrap {
  max-height: 206px;
  background-color: rgba(48, 49, 54, 1);
}

::v-deep .el-autocomplete-suggestion {
  border: 1px solid black;

}

::v-deep .el-autocomplete-suggestion li {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
}

::v-deep .el-autocomplete-suggestion li:hover {
  background-color: rgba(64, 66, 73, 1);
}

::v-deep .popper__arrow {
  display: none;
}

.but {
  position: absolute;
  justify-content: center;
  bottom: 40px;
  display: flex;
  width: 100%;
  gap: 20px;

  ::v-deep .el-button {
    width: 146px;
    height: 36px;
    border: 1px solid rgba(92, 251, 255, 1);
  }

  .cancel {
    ::v-deep .el-button {
      color: rgba(92, 251, 255, 1);
      background-color: rgba(48, 49, 54, 0);
    }
  }

  .confirm {
    ::v-deep .el-button {
      color: rgba(23, 24, 26, 1);
      background-color: rgba(92, 251, 255, 1);
    }
  }
}
.detail{
  width: 100%;
  height: 485px;
  overflow: hidden;
  display: flex;
  gap:40px;
  flex-wrap: wrap;
  justify-content: center;
  overflow-y: scroll;
  scroll-behavior: smooth;
  .time{
    color: #fff;
  }
}

.dialog-info {
  display: flex;
  margin-top: 30%;
  margin-left: 28%;
  color: #fff;
}
</style>
